<template>
  <!-- 组织管理管理 -->
  <div class="businessManage">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="id" label="业务组名称">
            <el-select v-model="formData.id" filterable clearable placeholder="请选择业务组名称">
              <el-option
                v-for="item in businessOptions"
                :key="item.id"
                :label="item.groupName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- <Button @click="resetHandle">重置</Button> -->
            <Button type="primary" enter :loading="loading" @click="queryHandle">查询</Button>
          </el-form-item>
          <el-form-item :span="12">
            <div class="button-container">
              <NameEditAdd text="新增" type="1" @confrim="add" />
              <NameEditAdd :edit-info="selectedAry" type="2" text="修改" @confrim="update" />
              <Button type="primary" @click="memberManage">组织成员管理</Button>
              <Button type="danger" :loading="loading" @click="delet">删除</Button>
            </div>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box
        ref="table"
        :no-request="true"
        :selected-arry.sync="selectedAry"
        :table-config="tableConfig"
        :other-filters="filterParams"
      />
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import NameEditAdd from '../components/NameEditAdd'
import { ArrayFormat } from '@/utils/params-format'
import { getBusinessAll, addBusiness, updateBusiness, deleteBusiness } from '@/api/business'
import { getStore } from '@/utils/store'
export default {
  name: 'SysBusiness',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    NameEditAdd
  },
  data() {
    return {
      formData: {
        id: ''
      },
      formRules: {},
      loading: false,
      selectedAry: [],
      businessOptions: [],
      tableConfig: {
        interfacePath: '/call-center/api/v1/businessGroup/page',
        pageFlag: true,
        hideFuncBar: true,
        sort: 'createTime',
        order: 'desc',
        // 表格字段动态配置
        setting: [
          {
            label: '序号',
            width: 80,
            align: 'center',
            formatData: function(val) { return val.keyIndex + 1 }
          },
          {
            prop: 'groupNo',
            label: '业务组编号',
            align: 'center'
          },
          {
            prop: 'groupName',
            label: '业务组名称',
            align: 'center'
          },
          {
            prop: 'memberNum',
            label: '成员人数',
            align: 'center'
          },
          {
            prop: 'createBy',
            label: '创建人',
            align: 'center',
            formatData: (val) => { return val.createBy ? val.createBy : '--' }
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center'
          }
        ]
      },
      filterParams: []
    }
  },
  mounted() {
    this.getBusinessOption()
  },
  methods: {
    // 根据条件查询
    queryHandle() {
      this.loading = true
      this.$refs.form
        .validate()
        .then(() => {
          // FIXME:
          this.filterParams = [...ArrayFormat(this.formData)]
          this.$nextTick(() => {
            this.$refs.table.initTableData()
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 获取组类别
     */
    getBusinessOption() {
      getBusinessAll().then(res => {
        if (res.success === 1) {
          this.businessOptions = res.data
        }
      })
    },
    /**
     * 重置表单
     */
    resetHandle() {
      this.$set(this.formData, 'id', '')
    },
    /**
     * 业务组名称添加
     */
    add(obj) {
      const params = {
        createBy: getStore({ name: 'account_name' }),
        createrName: getStore({ name: 'account_name' }),
        groupName: obj.name,
        groupNo: obj.code
      }
      addBusiness(params).then(res => {
        if (res.success === 1) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.$refs.table.initTableData()
          this.getBusinessOption()
        }
      }, (error) => {
        console.log(error)
      })
    },
    /**
     * 业务数据名称修改
     */
    update(obj) {
      if (!obj.createBy) obj.createBy = getStore({ name: 'account_name' })
      if (!obj.createrName) obj.createrName = getStore({ name: 'account_name' })
      if (obj.code) obj.groupNo = obj.code
      if (obj.name) obj.groupName = obj.name
      delete obj.code
      delete obj.name
      updateBusiness(obj).then(res => {
        if (res.success === 1) {
          this.$message({
            message: '业务组名称修改成功',
            type: 'success'
          })
          this.$refs.table.initTableData()
          this.getBusinessOption()
        }
      }, (error) => {
        console.log(error)
      })
    },
    /**
     * 删除业务数据ById
     */
    delet() {
      if (this.selectedAry.length === 0) {
        this.$message({
          message: '请选择需要删除的数据',
          type: 'warning'
        })
        return
      }
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        showCancelButton: true,
        message: h('div', [
          h('span', '是否确定删除'),
          h('span', { style: { color: 'red' }}, this.selectedAry[0].groupName),
          h('span', '业务组')
        ]),
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBusiness(this.selectedAry[0].id).then(res => {
          if (res.success === 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.$refs.table.initTableData()
            this.getBusinessOption()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    memberManage() {
      if (this.selectedAry.length === 0) {
        this.$message({
          message: '请选择需要查看的业务组',
          type: 'warning'
        })
        return
      }
      this.$router.push({ path: `/sys/businessMember/${this.selectedAry[0].id}` })
    }
  }
}
</script>
<style lang='scss' scoped>
.businessManage {
  .button-container {
    padding-top: 0;
  }
}
</style>
